<template>
  <el-container class="index-con">
    <el-aside :class="showclass" v-if="active == 2">
      <leftnav></leftnav>
    </el-aside>
    <el-container class="main-con">
      <el-header class="index-header">
        <navcon></navcon>
      </el-header>
      <div
        class="template-tabs"
        :style="!isclose ? 'left:210px;' : 'left:64px'"
        v-if="iscard && active==2"
      >
        <el-tabs
          v-model="activeIndex"
          type="card"
          closable
          @tab-click="tabClick"
          @tab-remove="tabRemove"
        >
          <el-dropdown class="site-tabs__tools" :show-timeout="0">
            <i class="el-icon-arrow-down el-icon--right"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="closeCurrentPage()"
                >关闭当前页</el-dropdown-item
              >
              <el-dropdown-item @click.native="closeLeftsidePage()"
                >关闭左侧标签页</el-dropdown-item
              >
              <el-dropdown-item @click.native="closeRightsidePage()"
                >关闭右侧标签页</el-dropdown-item
              >
              <el-dropdown-item @click.native="closeOtherPage()"
                >关闭其他标签页</el-dropdown-item
              >
              <el-dropdown-item @click.native="closeAllPage()"
                >关闭全部标签页</el-dropdown-item
              >
              <!-- <el-dropdown-item
                @click.native="tabsCloseCurrentHandle(item)"
                v-for="(item,indev) in options"
                :key="indev"
              >关闭{{item.name}}页</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
          <el-tab-pane
            :key="item.name"
            v-for="item in options"
            :label="item.name"
            :name="item.route"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <el-main :class="iscard ? 'index-main' : 'index-mains'">
        <router-view :class="iscard ? 'mainbox' : 'mainbox_show'"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
// 导入组件
import navcon from "../../components/navcon.vue";
import leftnav from "../../components/leftnav.vue";
export default {
  name: "index",
  data() {
    return {
      showclass: "asideshow",
      showtype: false,
      iscard: false,
      isclose: false,
      active:2,
    };
  },
  // 注册组件
  components: {
    navcon,
    leftnav,
  },

  mounted() {},
  methods: {
    // tab切换时，动态的切换路由
    tabClick(tab) {
      // v-model="activeIndex"是路由路径
      let path = this.activeIndex;
      this.$router.push({ path: path });
      this.$store.commit("set_role", "nopass");
    },
    tabRemove(targetName) {
      // targetName是路由路径
      this.$store.commit("set_role", "nopass");
      // let tabs = this.editableTabs;
      this.$store.commit("delete_tabs", targetName);
      // 如果激活tab页被关闭，那么需要激活别的tab页，最后一个tab页被关闭，那么跳转主界面
      if (this.activeIndex === targetName) {
        // 设置当前激活的路由
        if (this.options && this.options.length >= 1) {
          this.$store.commit(
            "set_active_index",
            this.options[this.options.length - 1].route
          );
          this.$router.push({ path: this.activeIndex });
        } else {
          this.$router.push({ path: "/dataStatistics" });
          this.iscard = false;
        }
      }
    },
    // 关闭其他标签页
    closeOtherPage(){
      var arrlength=this.options.length;
      var arr = this.options;
      var indx = "";
      arr.forEach((item, index) => {
        if (this.activeIndex == item.route) {
            indx = index;
        }
      });
      this.options.splice(indx + 1, arrlength);
      this.options.splice(0, indx);
    },
    // 关闭所有页面
    closeAllPage() {
      var arrlength=this.options.length;
      this.options.splice(0, arrlength);
      this.$router.push({ path: "/dataStatistics" });
      this.iscard = false;
      this.$store.commit("set_role", "nopass");
    },
    getupload() {
      var tData = {
        action: "common/upload/sts/token",
        headers: this.abdpConfig.getApiJson(),
        data: {},
      };
      this.abdpAjax.http(tData).then((rsp) => {
        if (rsp.data.code == 200) {
          console.log(rsp.data.data);
          sessionStorage.setItem('OSSFORM',JSON.stringify(rsp.data.data));
        } else {
          this.$message.error(rsp.data.message);
        }
      });
    },
    // 关闭右侧标签页
    closeRightsidePage() {
      var arr = this.options;
      var arrlength = this.options.length - 1;
      var indx = "";
      arr.forEach((item, index) => {
        if (this.activeIndex == item.route) {
          if (index == arrlength) {
            this.$message.warning("右侧没有多余页面");
          } else {
            indx = index;
          }
        }
      });
      if (indx !== "") {
        this.options.splice(indx + 1, arrlength);
      }
    },
    // 关闭左侧标签页
    closeLeftsidePage() {
      var arr = this.options;
      var indx = "";
      arr.forEach((item, index) => {
        if (this.activeIndex == item.route) {
          if (index == 0) {
            this.$message.warning("左侧没有多余页面");
          } else {
            indx = index;
          }
        }
      });
      if (indx !== "") {
        this.options.splice(0, indx);
      }
    },
    // 关闭当前页面
    closeCurrentPage() {
      this.tabRemove(this.activeIndex);
    },
    // tabs, 关闭当前
    tabsCloseCurrentHandle(item) {
      this.tabRemove(item.route);
    },
  },
  watch: {
    $route(to) {
      // 只要路由发生改变，就会触发此事件（点击左侧菜单时会触发，删除右侧tab页会触发，切换右侧已存在的tab页会触发）
      let role = this.$store.state.role;
      let showName = this.$store.getters.getShowName;
      let flag = false; //判断是否页面中是否已经存在该路由下的tab页
      //options记录当前页面中已存在的tab页
      for (let option of this.options) {
        //用名称匹配，如果存在即将对应的tab页设置为active显示桌面前端
        if (option.name === showName) {
          flag = true;
          this.$store.commit("set_active_index", to.path);
          break;
        }
      }
      //如果不存在，则新增tab页，再将新增的tab页设置为active显示在桌面前端
      // if(role!='nopass'){}
      if (role == "pass") {
        if (!flag) {
          this.$store.commit("add_tabs", { route: to.path, name: showName });
          this.$store.commit("set_active_index", to.path);
        }
      }
      if (this.options.length == 0) {
        this.iscard = false;
      } else {
        this.iscard = true;
      }
    },
  },
  computed: {
    options: {
      get() {
        return this.$store.state.options;
      },
    },
    //动态设置及获取当前激活的tab页
    activeIndex: {
      get() {
        return this.$store.state.activeIndex;
      },
      set(val) {
        this.$store.commit("set_active_index", val);
      },
    },
  },

  created() {
    this.active= sessionStorage.getItem('active');
    // 监听
    this.$root.Bus.$on("toggle", (value) => {
      if (value) {
        this.showclass = "asideshow";
        this.isclose = false;
      } else {
        setTimeout(() => {
          this.isclose = true;
          this.showclass = "aside";
        }, 300);
      }
    });
     this.getupload();
  },
  beforeUpdate() {},
  // 挂载前状态(里面是操作)
  beforeMount() {
    // 弹出登录成功
  },
};
</script>

<style scoped>
.template-tabs {
  padding-left: 0px;
  padding-right: 0px;
  position: fixed;
  top: 60px;
  left: 210px;
  right: 0;
  z-index: 930;
  background: #f0f0f0;
}
.el-tabs--border-card > .el-tabs__header {
  border: none !important;
}
.index-con {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.aside {
  width: 64px !important;
  height: 100%;
  background-color: #334157;
  margin: 0px;
}
.asideshow {
  width: 210px !important;
  height: 100%;
  background-color: #334157;
  margin: 0px;
}
.index-header,
.index-main {
  padding: 0px;
  /* border-left: 2px solid #333; */
}
.index-main {
  padding: 20px;
  margin-top: 40px;
  /* background-color: #EEF1F2; */
  background-color: #f1f4f5;

  height: calc(100vh - 180px);
}
.index-mains {
  padding: 20px;
  margin-top: 0px;
  background-color: #f1f4f5;
  height: calc(100vh - 60px);
}
.mainbox {
  padding: 20px;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-height: calc(100vh - 180px);
}
.mainbox_show {
  padding: 20px;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-height: calc(100vh - 140px);
}
</style>
<style>
.tabs__content {
  padding: 0px !important;
}
.template-tabs .el-tabs--card .el-tabs__content {
  display: inline-block;
  width: 36px;
  text-align: center;
  height: 41px;
  font-size: 16px;
  line-height: 41px;
  background-color: #f1f4f5;
  cursor: pointer;
  border: 1px solid #e5e5e5;
}
.el-tabs--border-card {
  /* box-shadow: none !important; */
}
.template-tabs .el-tabs--card {
  display: flex;
}
.template-tabs .el-tabs__nav-scroll {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
}
.el-icon--right {
  font-size: 18px;
}
.el-tabs--card > .el-tabs__header {
  width: 98%;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
  background-color: #fff;
}
</style>